<template>
  <div class="sidebar">
    <!-- <div class="ling"> -->
    <!-- <img src="static/images/home/ling.png" alt="" srcset="" /> -->

    <!-- </div> -->
    <div class="service">
      <div slot="reference" @click="toHref" class="consult">
        <i class="el-icon-headset"></i>
        在线<br />咨询
      </div>
      <el-popover placement="left" width="200" trigger="click">
        <div>
          <div class="code">
            <img src="../assets/images/projectdetails/code.jpg" width="100%" />
          </div>
        </div>
        <!-- <div slot="reference">
          <img src="/static/images/icon/icon1.png" width="24" />下载
        </div> -->
        <div
          slot="reference"
          @mouseenter="hoverShow1(1)"
          @mouseleave="hoverShow1(0)"
        >
          <img
            src="../assets/images/icon/icon2.png"
            width="24"
            v-show="!boxShow1"
          />
          <span v-show="boxShow1">官方<br />微信</span>
        </div>
      </el-popover>
      <!-- <div><img src="/static/images/icon/icon2.png" width="24" />资讯</div> -->
      <el-popover placement="left" width="320" trigger="click">
        <div class="tel">请拨打咨询热线 4000106188</div>
        <div
          slot="reference"
          @mouseenter="hoverShow2(1)"
          @mouseleave="hoverShow2(0)"
        >
          <img
            src="../assets/images/icon/icon3.png"
            width="24"
            v-show="!boxShow2"
          />
          <span v-show="boxShow2">电话<br />咨询</span>
        </div>
      </el-popover>
      <!-- <div><img src="/static/images/icon/icon3.png" width="24">电话</div> -->
      <div
        @click="backTop"
        @mouseenter="hoverShow3(1)"
        @mouseleave="hoverShow3(0)"
      >
        <!-- <img src="/static/images/icon/icon4.png" width="24" /> -->
        <i class="el-icon-arrow-up" v-show="!boxShow3"></i>
        <span v-show="boxShow3">返回<br />顶部</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // 页面名称
  name: 'headernav',
  // 接受父组件传值
  props: {},
  // 定义模板
  components: {},
  // Data数据
  data() {
    return {
      backTopShow: false,
      name: null,
      telPrefix: '+86',
      tel: '',
      code: '',
      buttonName: '获取验证码',
      isDisabled: false,
      time: 10,
      boxShow1: 0,
      boxShow2: 0,
      boxShow3: 0,
    }
  },
  // 侦听器
  watch: {},
  // 钩子函数
  mounted() {
    window.addEventListener('scroll', this.scroll, true)
    this.scroll()
    let height = document.documentElement.clientHeight
    // console.log(height)
  },
  // 方法
  methods: {
    // 回到顶部
    backTop() {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    },
    // 监听滚动
    scroll() {
      let top = document.documentElement.scrollTop
      let height = document.documentElement.clientHeight
      if (top - height >= 0) {
        this.backTopShow = true
      } else {
        this.backTopShow = false
      }
      // console.log(top)
    },
    sendMsg() {
      let me = this
      if (this.tel.length != 11) {
        this.$message.error('请正确填写手机号')
        return
      }
      me.isDisabled = true
      let interval = window.setInterval(function () {
        me.buttonName = me.time
        --me.time
        if (me.time < 0) {
          me.buttonName = '重新发送'
          me.time = 10
          me.isDisabled = false
          window.clearInterval(interval)
        }
      }, 1000)
    },
    putLing() {
      let prmData = {
        // name: this.name,
        telPrefix: this.telPrefix,
        tel: this.tel,
        code: this.code,
      }
      if (prmData.tel.length != 11) {
        this.$message.error('请正确填写手机号')
        return
      } else if (prmData.code.length != 6) {
        this.$message.error('请正确6位验证码')
        return
      }
      console.log(prmData)
      this.$notify.success({
        title: '恭喜您，成功领取!',
        message: '3个工作日内会有客服工作人员联系您',
      })
    },
    // 跳转外链
    toHref() {
      window.open('http://unclesamedu.mikecrm.com/Nr18M07', '_blank')
    },
    //
    hoverShow1(e) {
      this.boxShow1 = e
    },
    hoverShow2(e) {
      this.boxShow2 = e
    },
    hoverShow3(e) {
      this.boxShow3 = e
    },
  },
}
</script>
<style lang="scss" scoped>
// .headernav {
@keyframes floating {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20%);
  }
}
.tel {
  font-size: 20px;
  text-align: center;
  // font-weight: bold;
  color: white;
  border-radius: 9px;
  padding: 13px;
  background: #8d3996;
}
.code {
  padding: 13px;
  background: #8d3996;
  border-radius: 9px;
}
.input {
  & > div {
    box-sizing: border-box;
    margin-bottom: 18px;
    // .codeinput{
    //   width: 50%;
    // }
    .getcode {
      text-align: right;
      button {
        width: 130px;
      }
    }
  }
  .title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }
  .put {
    text-align: center;
    button {
      width: 100%;
    }
  }
  & >>> .el-input-group__prepend {
    width: 39px;
  }
}
.sidebar {
  position: fixed;
  top: 30%;
  right: 0;
  z-index: 9;
  text-align: center;
  // .ling {
  //   margin-bottom: 9px;
  //   animation: floating 3s ease infinite both;
  //   cursor: pointer;
  // }
  .service {
    width: 50px;
    font-size: 12px;
    // border-radius: 6px 0 0 6px;
    // box-shadow: 0 0 10px 3px #ccc;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    div {
      width: 50px;
      height: 68px;
      cursor: pointer;
      // background: white;
      box-sizing: border-box;
      margin-bottom: 6px;
      // border-top: 1px solid #eee;
      // background: #dfdfdf;
      background:rgba(0,0,0,0.4);
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      &.consult {
        background: #8d3996;
      }
      i {
        font-size: 20px;
      }
      &:hover {
        background: #8d3996;
        img {
          filter: grayscale(100%) brightness(900%);
        }
      }
    }
  }
}
// }
</style>
<style lang="scss">
.el-popover {
  border-radius: 9px;
  padding: 0;
  border: none;
  background: none;
  // overflow: hidden;
}
.el-popper .popper__arrow::after,
.el-popper[x-placement^='left'] .popper__arrow::after {
  border-left-color: #5bb166;
}
</style>
